<template>
    <div class="search-box">
        <!--顶部搜索栏-->
        <div class="top-search-box">
            <van-nav-bar left-arrow @click-left="onClickLeft()">
                <template #title>
                    <van-search v-model="searchContent" show-action placeholder="请输入搜索关键词~" @search="submitSearch()"
                        @cancel="onCancel()">
                        <template #action>
                            <div @click="submitSearch()">{{ searchContent ? '搜索' : '取消'
                            }}</div>
                        </template>
                    </van-search>
                </template>
            </van-nav-bar>
        </div>
        <!--展示热搜信息-->
        <div class="hot-content">
            <van-cell title="易搭衣橱热搜" value-class="right-tag" is-link value="完整榜单" @click="wholeRankList()" />
            <!--展示热榜前十的内容-->
            <div class="hot-top10">
                <div class="hot-item" v-for="(item) in hotList" v-bind:key="item.id">
                    <span class="text-ellipsis" @click="selectHistory(item.content)">{{ item.content }}</span>
                    <div :class="'hot-tag hot-' + item.type"></div>
                </div>
            </div>
        </div>
        <div v-if="historyList.length">
            <van-cell title="搜索历史" :value="isOpenHistory ? '收起' : '展开'" :clickable="true" @click="openHistory()"
                value-class="right-tag" />
            <!--展示搜索历史内容-->
            <div :style="{ height: isOpenHistory ? 'auto' : '90px', overflow: isOpenHistory ? 'visibale' : 'hidden' }">
                <div class="cell-box">
                    <div class="cell-item text-ellipsis" v-for="(item, index) in historyList" v-bind:key="item.id"
                        @click=selectHistory(item.content)>{{ item.content }}</div>
                </div>
            </div>
            <div>
                <van-button size="mini" icon-prefix="iconfont" @click="clearHistoty" icon="delete"
                    :style="{ backgroundColor: 'transparent', border: 'none', color: '#9b9b9b' }">清空搜索历史</van-button>
            </div>
        </div>
        <div v-if="searchList && searchList.length">
            <van-cell title="搜索发现" :value="isOpenSearch ? '隐藏' : '显示'" :clickable="true" @click="openSearch()"
                value-class="right-tag" />
            <div v-show="isOpenSearch" class="cell-box">
                <div class="cell-item text-ellipsis" v-for="(item, index) in searchList" v-bind:key="index"
                    @click=selectHistory(item)>{{ item }}</div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from "vue";
import { showToast } from "vant";
import { useRouter } from 'vue-router';
import _service from "../request/axios"

const router = useRouter();

let searchContent = ref("");
let hotList = ref(new Array());
let historyList = ref(new Array());
let searchList = ref(new Array());
let isOpenHistory = ref(false);
let isOpenSearch = ref(false);

function pageInit() {
    //获取热搜榜单
    _service.get("/search/hot").then((res) => {
        if (res) {
            if (!res.code) {
                hotList.value = res.data;
                // showToast("加载完成~");
            } else {
                showToast(res.msg);
            }
        } else {
            showToast("服务端错误，请稍后再试~")
        }
    })
    //获取用户的浏览历史
    _service.get("/search/history").then((res) => {
        if (res) {
            if (!res.code) {
                historyList.value = res.data;
                // showToast("加载完成~");
            } else {
                showToast(res.msg);
            }
        } else {
            showToast("服务端错误，请稍后再试~")
        }
    })
    //给出搜索推荐
    _service.get("/search/recom").then((res) => {
        if (res) {
            if (!res.code) {
                searchList.value = res.data;
                // showToast("加载完成~");
            } else {
                showToast(res.msg);
            }
        } else {
            showToast("服务端错误，请稍后再试~")
        }
    })
}
pageInit();

function wholeRankList() {
    showToast("偷个懒，先不开发o(〃'▽'〃)o ~");
}

function selectHistory(content) {
    console.log("输出用户直接选择的搜索内容~", content);
    router.push("/search/result?content=" + content);
}

function submitSearch() {
    if (searchContent.value) {
        router.push("/search/result?content=" + searchContent.value);
        searchContent.value = "";
    } else {
        showToast("搜索内容不能为空哦~");
        return;
    }
    // showToast("搜索功能暂时不开放~");
}
function onCancel() {
    console.log("取消搜索");
    searchContent.value = "";
}
function openHistory() {
    console.log("搜索历史展开被点击");
    isOpenHistory.value = !isOpenHistory.value;
}
function openSearch() {
    isOpenSearch.value = !isOpenSearch.value;
}
function clearHistoty() {
    _service.post("/search/clear").then((res) => {
        if (res) {
            if (!res.code) {
                historyList.value = new Array();
                showToast(res.msg);
            } else {
                showToast(res.msg);
            }
        } else {
            showToast("服务端错误，请稍后再试~")
        }
    })
}
function onClickLeft() {
    router.back();
}
</script>
<style lang="less" scoped>
.search-box {
    .van-cell {
        padding: 0px 10px;
    }

    .van-nav-bar__title {
        font-weight: normal;
    }

    .van-search__action {
        font-weight: bold;
    }

    ::v-deep(.van-nav-bar__title) {
        width: 100%;
    }

    ::v-deep(.van-field__control) {
        font-size: 12px;
    }

}


.hot-top10 {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    /*保证宽度有效*/
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0px 10px 10px;
}

.hot-item {
    display: flex;
    width: calc(50% - 15px); //保证只有两列
    line-height: 30px;
    height: 30px;
    font-size: 14px;

    .hot-tag::before {
        font-size: 10px;
        border-radius: 3px;
        padding: 2px;
        color: #ffffff;
        margin-left: 10px; //flex可以抵消功能
    }

    .hot-hot::before {
        content: "热";
        background-color: #fa5751;
    }

    .hot-new::before {
        content: "新";
        background-color: #feb020;
    }
}

.cell-box {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;

    .cell-item {
        background-color: #f1f2f4;
        padding: 8px 10px;
        border-radius: 4px;
        font-size: 12px;
        max-width: 50%;
        margin: 0px 10px 10px 0px;
    }
}
</style>